<!--
弹窗型action基类，用于代用弹窗动作的action
继承基本action基类
-->
<template>
	<div class="action"
	     :class="{['action-hide']:this.model.locate==='inline'}">
		<slot name="button">
			<Button class="action-button"
			        :disabled="!actionEnable"
			        :icon="model.icon"
			        @click="actionTrigger"
			        :type="buttonType">
				{{model.name}}
			</Button>
		</slot>
		<div class="action-modal-box"
		     v-if="isLoad">
			<ActionModal ref="modal"
			             :modalTransfer="modalTransfer"
			             :action-model="actionModel"
			             :action-data="actionData"
			             :modalShow="modalShow"
			             :open.sync="modalShow"
			             :isLoad="isLoad"></ActionModal>
		</div>
	</div>
</template>

<script>
import actionBase from './actionBase';
import ActionModal from './modalBase';

export default {
	extends: actionBase,
	props: {
		modalTransfer: {},
	},
	data() {
		return {
			modalShow: false,
			isLoad: false,
			//提交成功后自动更新owner
			updateOwner: true,
			buttonType: 'ghost',
		};
	},
	methods: {
		actionTrigger(id, data, index, cb, option, ...arg) {
			if (!this.isLoad) this.isLoad = true;
			if (data) this.actionData = data;
			this.actionOption = option;
			this.actionDataIndex = index;
			this.modalShow = false;
			this.$nextTick(() => {
				this.modalShow = true;
				this.actionReload();
			});
		},
		actionCancel() {
			this.modalClose();
		},
		actionReload() {},
		modalClose() {
			this.modalShow = false;
			this.isLoad = false;
		},
	},
	created() {},
	components: {
		ActionModal,
	},
};
</script>

<style lang="less">
.action-modal-box {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.action.action-hide {
	margin: 0;
	.action-button {
		display: none;
	}
}
</style>
